<!--星云背景-->
<template>
  <div class="cloudStarsWrapper">
    <div class="star" v-for="(item,index) in starsCount" :key="index" ref="star"></div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

@Component({})
export default class CloudStars extends Vue {
  $refs!: {
    star: HTMLDivElement
  }
  starsCount = 800 //数量
  distance = 600 //间距

  mounted() {
    let starArr = Array.prototype.slice.call(this.$refs.star)
    starArr.forEach((item) => {
      var speed = 0.2 + Math.random() * 1
      var distance = this.distance + Math.random() * 300
      item.style.transformOrigin = `0 0 ${distance}px`
      item.style.transform = `translate3d(0,0,-${distance}px) rotateY(${
        Math.random() * 360
      }deg) rotateX(${Math.random() * -50}deg) scale(${speed},${speed})`
    })
  }
}
</script>

<style lang="scss">
.cloudStarsWrapper {
  transform: perspective(500px);
  transform-style: preserve-3d;
  position: absolute;
  perspective-origin: 50% 100%;
  animation: rotate 90s infinite linear;
  top: 100%;
  left: 50%;
  .star {
    width: 2px;
    height: 2px;
    background: #03e9f4;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
  }
  @keyframes rotate {
    0% {
      transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
    }
    100% {
      transform: perspective(400px) rotateZ(20deg) rotateX(-40deg)
        rotateY(-360deg);
    }
  }
}
</style>
